<script lang="ts" setup>
  import { computed } from "vue";
  import { getSize } from "../utils";

  const props = withDefaults(
    defineProps<{
      direction?: string;
      size?: number | string;
      align?: string;
      fill?: boolean;
    }>(),
    {
      direction: "horizontal",
      fill: false,
    }
  );

  const styles = computed<any>(() => {
    let align: string = "";
    if (!props.fill) {
      align = props.align || "start";
    }
    const newStyles: any = {
      flexDirection: props.direction === "vertical" ? "column" : "row",
      gap: props.direction !== undefined ? getSize(props.size) : null,
    };
    if (props.direction === "horizontal" && align !== "") {
      let alignItemMap: any = {
        start: "flex-start",
        center: "center",
        end: "flex-end",
      };
      newStyles.alignItems = alignItemMap[align];
    } else if (props.direction === "vertical" && align !== "") {
      let justifyContentMap: any = {
        start: "flex-start",
        center: "center",
        end: "flex-end",
        between: "space-between",
      };
      newStyles.alignItems = justifyContentMap[align];
    }
    return newStyles;
  });
</script>

<template>
  <div class="umi-space" :style="styles">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
  .umi-space {
    display: flex;
  }
</style>
